

import React, { useState } from 'react';
// import { Form, Input, Radio, Button } from 'antd';
import { addUser } from '../../stores/UserSlice';
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { Form, Input, Button, Radio } from 'antd-mobile'



const PreAndTab = () => {
    const [dinnerINput, setDinnerINput] = useState(null);
    const [homeINput, setHomeINput] = useState(null);
    const [carINput, setCarINput] = useState(null);
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const onFinish = (values) => {
        const newUser = {
            ...values,
            dinner: dinnerINput !== null ? (dinnerINput ? '有' : '无') : null,
            home: homeINput !== null ? (homeINput ? '有' : '无') : null,
            car: carINput !== null ? (carINput ? '有' : '无') : null,
            id: Date.now()
        };
        dispatch(addUser(newUser));
        navigate('/apply');
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className='PreAndTab'>
            <div style={{marginBottom: 20}}>

                <h2> <span onClick={()=>{navigate(-1)}} style={{marginRight: 30}}>&lt;</span>重要客户的喜好和禁忌</h2>

            </div>

            <Form
                layout="horizontal"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                footer={
                    <Button block type="submit" color="primary" size="large">
                        保存
                    </Button>
                }
            >
                <Form.Item
                    name="username"
                    label="姓名"
                    rules={[{ required: true, message: '请输入姓名!' }]}
                >
                    <Input placeholder="请输入姓名" />
                </Form.Item>

                <Form.Item
                    name="sex"
                    label="性别"
                    rules={[{ required: true, message: '请选择性别!' }]}
                >
                    <Radio.Group>
                        <Radio value="男">男</Radio>
                        <Radio value="女">女</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item name="work" label="职位">
                    <Input placeholder="请输入职位" />
                </Form.Item>

                <Form.Item name="phone" label="联系方式">
                    <Input placeholder="请输入联系方式" />
                </Form.Item>

                <Form.Item
                    label="用餐喜好和禁忌"
                    name='dinner'
                    validateStatus={dinnerINput === null ? 'error' : ''}
                    // rules={[{ required: true, message: '请选择用餐喜好和禁忌!' }]}
                >
                    <div style={{ display: 'flex', gap: '8px', marginBottom: dinnerINput === true ? 10 : 0 }}>
                        <Button
                            color={dinnerINput === true ? 'primary' : 'default'}
                            onClick={() => setDinnerINput(true)}
                        >
                            有
                        </Button>
                        <Button
                            color={dinnerINput === false ? 'primary' : 'default'}
                            onClick={() => setDinnerINput(false)}
                        >
                            无
                        </Button>
                    </div>
                    {dinnerINput === true && (
                        <Form.Item name="dinnerDetail" noStyle>
                            <Input placeholder="请输入用餐喜好和禁忌" />
                        </Form.Item>
                    )}
                </Form.Item>

                <Form.Item
                    label="住宿喜好和禁忌"
                    name='home'

                    validateStatus={homeINput === null ? 'error' : ''}
                    //  rules={[{ required: true, message: '请选择住宿喜好和禁忌!' }]}
                >
                    <div style={{ display: 'flex', gap: '8px', marginBottom: homeINput === true ? 10 : 0 }}>
                        <Button
                            color={homeINput === true ? 'primary' : 'default'}
                            onClick={() => setHomeINput(true)}
                        >
                            有
                        </Button>
                        <Button
                            color={homeINput === false ? 'primary' : 'default'}
                            onClick={() => setHomeINput(false)}
                        >
                            无
                        </Button>
                    </div>
                    {homeINput === true && (
                        <Form.Item name="homeDetail" noStyle>
                            <Input placeholder="请输入住宿喜好和禁忌" />
                        </Form.Item>
                    )}
                </Form.Item>

                <Form.Item
                    label="用车喜好和禁忌"
                    name='car'
                    validateStatus={carINput === null ? 'error' : ''}
                    //  rules={[{ required: true, message: '请选择用车喜好和禁忌!' }]}
                >
                    <div style={{ display: 'flex', gap: '8px', marginBottom: carINput === true ? 10 : 0 }}>
                        <Button
                            color={carINput === true ? 'primary' : 'default'}
                            onClick={() => setCarINput(true)}
                        >
                            有
                        </Button>
                        <Button
                            color={carINput === false ? 'primary' : 'default'}
                            onClick={() => setCarINput(false)}
                        >
                            无
                        </Button>
                    </div>
                    {carINput === true && (
                        <Form.Item name="carDetail" noStyle>
                            <Input placeholder="请输入用车喜好和禁忌" />
                        </Form.Item>
                    )}
                </Form.Item>

                <Form.Item name="vote" label="备注">
                    <Input placeholder="请输入备注" />
                </Form.Item>
            </Form>
        </div>
    );
};

export default PreAndTab;



